<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 - ol4加载百度在线地图</title>
    <script src="../lib/ol4/ol4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="baiduMap" style="width: 100%"></div>
<script>
    // 百度地图层
    var baiduMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            tilePixelRatio: 2,
            tileUrlFunction: function (tileCoord) { // 参数tileCoord为瓦片坐标
                var z = tileCoord[0];
                var x = tileCoord[1];
                var y = tileCoord[2];

                var halfTileNum = Math.pow(2, z - 1);

                var baiduX = x - halfTileNum;
                var baiduY = y + halfTileNum;

                if (baiduX < 0) {
                    baiduX = 'M' + (-baiduX);
                }
                if (baiduY < 0) {
                    baiduY = 'M' + (-baiduY);
                }

                return 'http://online2.map.bdimg.com/onlinelabel/?qt=tile&x=' + baiduX + '&y=' + baiduY + '&z=' + z + '&styles=pl&udt=20160321&scaler=2&p=0';
            }
        })
    });

    // 创建地图
    var map = new ol.Map({
        layers: [
            baiduMapLayer
        ],
        view: new ol.View({
            // 设置成都为地图中心
            center: [104.06, 30.67],
            projection: 'EPSG:4326',
            zoom: 4
        }),
        target: 'baiduMap'
    });
</script>
</body>
</html>